require(['require_config'],function(config){
	require([
		'vue',
		'plugins/headerBar',
		'plugins/pluginA',
		'plugins/pluginB',
	],
	function(Vue,headerBar,pluginA,pluginB){
		var rootPage = Vue.extend({
			name:'rootPage',
			template:
			`
				<div>
					<header-bar :title="currentTitle" @goBack="goBack"></header-bar>
					<component v-model="datas" :is="currentScene" @changePage="changePage"></component>
				</div>
			`,
			components: {
				headerBar,
				pluginA,
				pluginB
			},
			data: function(){
				return{
					datas:{
						name:'初始化名字',
						sex:1
					},
					components:[
						{title:'组件A',type:'pluginA'}
					]
				}
			},
			computed: {
				//动态计算当前标题
				currentTitle() {
					return this.components[this.components.length-1].title;
				},
				//动态计算当前显示的页面模块
				currentScene() {
					return this.components[this.components.length-1].type;
				}
			},
			methods: {
				/*
				* 此处的changePage，和goBack分表实现页面模板的来回切换方法
				* 通过data中的components数组，
				* 模拟浏览历史栈数据结构的先进后出的特点，
				* 从而实现记录历史步骤
				*/ 
				//返回
				goBack(){
					if(this.components.length>1){
						this.components.splice(this.components.length-1,1);
						this.$set(this,'components',this.components);
					}else{
						alert('没有上一页了')
					}
				},
				//点击切换页面
				changePage(type,title) {
					var obj = {
						title:title,
						type:type
					}
					this.$set(this,'components',[...this.components,obj]);
				}
			}
		})
		new Vue({
			el: '#scene_wapper',
			components: {
				rootPage
			}
		})
	})
})